<template>
  <LhzA ref="lhzA">
    <template v-slot:nav>
      <div>
        头部导航
      </div>
    </template>
    <template v-slot:default>
      <input type="text" autocomplete="off" v-model="username">
      <button type="button" @click="love">love</button>
    </template>
    <template v-slot:footer>
      <div>
        友情链接
      </div>
    </template>
    <template #lhz>
      <div>
        插槽缩写
      </div>
    </template>
    <template #lhz-aa="lhzData">
      <div v-for="(name,index) in lhzData.names" :key="name + index" v-text="name">
      </div>
    </template>
    <template #lhz-bb="lhzData">
      <span v-text="lhzData.item"></span>
    </template>
    <template #lhz-cc="{names}">
      <div v-for="(name,index) in names" :key="name + index" v-text="name">
      </div>
    </template>
    <template #lhz-dd="{nameItem:item}">
      <span v-text="item"></span>
    </template>
  </LhzA>
</template>

<script>
import LhzA from "@/components/chap06/LhzA";

export default {
  name: "HelloLhz",
  data() {
    return {
      username: '李昊哲'
    }
  },
  methods: {
    love() {
      this.username = '我爱你中国';
      alert(this.username);
    }
  },
  components: {
    LhzA
  }
}
</script>

<style scoped>

</style>